<template>
  <div>
    <div class="fod">
    <el-image  :src="url" class="fod" >
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
      <p class="fodname">专业全面的食物数据库</p>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: "foodanddrink",
  data(){
    return{
      url:require("@/assets/foodtitle.jpg")
    }
  }
}
</script>

<style scoped>
.fod{
  width: 100%;
  height: 280px;
  z-index: -5;
}
.fodname{
  position: relative;
  top: -200px;
  color:white;
  font-size: 50px;
  text-align: center;
}
</style>
